<template>
	<view class="body">
		<xk-header title="车辆预约列表"></xk-header>
		<view class="util-bar">
		<view class="top-white-box">

		<!--搜索框 start-->
		<view class="search-box">
			<u-search shape="square" placeholder="单号/用车人/电话" height="42" :showAction="false" v-model="formdata.searchKey" @search="searchHandle"></u-search>
		</view>
		<!--搜索框 end-->

		<!--选项切换菜单 start-->
		<u-tabs
		     :current="tabIndex"
			 :list="tabsList"
			 @click="clickTabs"
			 lineWidth="40"
			 lineColor="#f56c6c"
			 :activeStyle="{
				 color: '#000000',
				 fontWeight: 'bold',
				 transform: 'scale(1.15)'
			 }"
			 :inactiveStyle="{
				 color: '#303133',
				 transform: 'scale(1.15)'
			 }"
			 itemStyle="padding-left: 15px; padding-right: 15px;height:45px;width:25%;"
		 ></u-tabs>
		 <!--选项切换菜单 end-->
		 </view>

		 <!--查询日期 start-->
		 <view class="select-search-btn">
			<u-row>
				<u-col span="4" offset="1">
					<view @click="showDate= true">
						<u--text suffixIcon="arrow-down-fill" size="15" bold iconStyle="font-size:15px;margin-left:2px;" :text="valueDate[tabIndex].date||'全部'"></u--text>
					</view>
					<u-datetime-picker
						:show="showDate"
						v-model="valuePickerDate"
						mode="year-month"
						@cancel="cancelDate"
						@confirm="confirmDate"
					></u-datetime-picker>
				</u-col>
				<u-col span="2"><view @click="resetSort()">重置</view></u-col>
			</u-row>
		 </view>
		 <!--查询日期 end-->
		 </view>

		 <!--列表 start-->
		 <swiper :current="tabIndex" class="list-swiper"
		 	@change="tabsChange"
		 	:style="'height:'+scrollViewHeight+'px;'"
		 	>
		 	<swiper-item v-for="(tabItem, tabIndex) of tabsList" :key="tabIndex">
		 		<scroll-view refresher-background="#F8F8F8" :refresher-enabled="true" @scrolltolower="reachBottom" :refresher-triggered="triggered" @refresherrefresh="pullDownRefresh" scroll-y :style="'height:'+scrollViewHeight+'px;'">
		 			<view v-if="tabItem.data.length > 0" class="list-info">
		 				<view v-for="(item,index) of tabItem.data" :key="item.id" class="data-list">
							<view class="title">申请单号：{{item.apply_no}}</view>
		 					<u-row customStyle="margin-bottom: 10px">
								<u-col span="4"><text class="grey-text">用车人：</text></u-col>
								<u-col span="8">{{item.apply_car_name}} </u-col>
		 					</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="4"><text class="grey-text">用车人电话：</text></u-col>
								<u-col span="8">{{item.apply_phone}}</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="4"><text class="grey-text">用车性质：</text></u-col>
								<u-col span="8">
									<view v-if="item.apply_car_type==10" class="color-text-1">出差</view>
									<view v-if="item.apply_car_type==20" class="color-text-2">客户接待</view>
								</u-col>
							</u-row>
                            <view class="list-btn" v-if="item.reserve_status==10">
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="12"><view class="yuyue" @click="viewDetail" :data-id="item.car_reserve_id">查看详情</view></u-col>
								</u-row>
							</view>
							<view class="list-btn" v-else>
								<u-row customStyle="margin-bottom: 10px">
									<u-col span="6"><view class="detail" @click="viewDetail" :data-id="item.car_reserve_id">查看详情</view></u-col>
									<u-col span="6" v-if="item.reserve_status==20"><view class="yuyue" @click="viewAccept" :data-id="item.car_reserve_id">立即受理</view></u-col>
									<u-col span="6" v-if="item.reserve_status==30"><view class="greycl">受理不通过</view></u-col>
									<u-col span="6" v-if="item.reserve_status==40"><view class="yuyue" @click="openLingyong" :data-item="item">领用登记</view></u-col>
									<u-col span="6" v-if="item.reserve_status==50"><view class="yuyue" @click="openGuihuan" :data-item="item">归还登记</view></u-col>
									<u-col span="6" v-if="item.reserve_status==60"><view class="yuyue" @click="openYichang" :data-item="item">异常处理</view></u-col>
									<u-col span="6" v-if="tabIndex==2&&item.reserve_status==70"><view class="greycl">已完成</view></u-col>
									<u-col span="6" v-if="tabIndex==2&&item.reserve_status==80"><view class="greycl">已完成[超时]</view></u-col>
									<u-col span="6" v-if="tabIndex==2&&item.reserve_status==90"><view class="greycl">已完成[异常处理]</view></u-col>
									<u-col span="6" v-if="item.reserve_status==100"><view class="greycl">审批中</view></u-col>
									<u-col span="6" v-if="item.reserve_status==110"><view class="greycl">审批不通过</view></u-col>
									<u-col span="6" v-if="item.reserve_status==null"><view class="greycl">异常</view></u-col>
								</u-row>
							</view>
		 				</view>
						<view class="loadText-0"><u-loadmore loadingText="数据装载中..." :status="loadmoreStatus" /></view>
		 			</view>
		 			<view class="empty-view" v-else>
						<view v-if="isloading" class="loadText-0"><u-loadmore loadingText="数据装载中..." :status="loadmoreStatus" /></view>
						<view v-else>
							<u-empty mode="list" :icon="(imgUrl+'/wx/empty_data_icon.png')" text="哎呀，该界面暂无内容~"></u-empty>
						</view>
		 			</view>
		 		</scroll-view>
		 	</swiper-item>
		 </swiper>
		 <!--列表 end-->
		 <view v-if="$util.getRights().pi_delist_apply&&tabIndex===0">
			 <view class="common-bottom-view">
				<view @click="viewApply" class="common-btn">用车申请</view>
			 </view>
			 <view style="height:100px;"></view>
		 </view>
         <u-popup
         :show="showLingyong"
         :round="8"
         closeable
         @close="showLingyong=false"
         customStyle="height:60%"
         >
         	<view class="wy-title">用车领用登记</view>
			<view class="wybox">
			<u--form
			labelPosition="left"
			:model="lingyongData"
			:rules="rules1"
			ref="uviewForm1"
			>
				<u-form-item
					label="事项编码:"
					prop="car_reserve_id"
					borderBottom
					ref="car_reserve_id"
					labelWidth="120"
				>
				{{lingyongData.car_reserve_id}}
				</u-form-item>
				<u-form-item
					label="领用时间:"
					prop="requisi_time"
					borderBottom
					ref="requisi_time"
					labelWidth="120"
				>
				<view style="text-align:left;width:100%" @click="showPKtime(1)">{{lingyongData.requisi_time?lingyongData.requisi_time:'请选择归还时间'}} <u-icon style="display: inline-flex;" name="arrow-right"></u-icon></view>
				</u-form-item>
				<u-form-item
					label="领用描述:"
					prop="requisi_content"
					borderBottom
					ref="requisi_content"
					labelWidth="120"
				>
				<u--input v-model="lingyongData.requisi_content" placeholder="请输入领用描述" border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="备注:"
					prop="requisi_remark"
					borderBottom
					ref="item1"
					labelWidth="120"
				>

				</u-form-item>
				<u--textarea v-model="lingyongData.requisi_remark" placeholder="请输入备注" height="50" count confirmType="done"></u--textarea>
			</u--form>
			<view class="btn-dengji"><u-button type="primary" shape="circle" text="提交领用登记" @click="doneLingyong"></u-button></view>
			</view>
         </u-popup>

		 <u-popup
		 :show="showGuihuan"
		 :round="8"
		 closeable
		 @close="showGuihuan=false"
		 customStyle="height:60%"
		 >
		 	<view class="wy-title">用车归还登记</view>
			<view class="wybox">
			<u--form
			labelPosition="left"
			:model="guihuanData"
			:rules="rules2"
			ref="uviewForm2"
			>
				<u-form-item
					label="申请单号:"
					prop="apply_no"
					borderBottom
					ref="apply_no"
					labelWidth="120"
				>
				{{apply_no}}
				</u-form-item>
				<u-form-item
					label="归还时间:"
					prop="return_time"
					borderBottom
					ref="return_time"
					labelWidth="120"
				>
				<view style="text-align:left;width:100%" @click="showPKtime(2)">{{guihuanData.return_time?guihuanData.return_time:'请选择归还时间'}} <u-icon style="display: inline-flex;" name="arrow-right"></u-icon></view>
				</u-form-item>
				<u-form-item
					label="车辆情况:"
					prop="return_situation"
					borderBottom
					ref="item1"
					labelWidth="120"
				>
				<u-radio-group v-model="guihuanData.return_situation" placement="row">
					<u-radio shape="square" v-for="(item, index) in radioList" :key="index" :name="item.name"
						active-color="#25afa2" :label="item.nameText" style="margin-right:20px;">
						{{item.nameText}}
					</u-radio>
				</u-radio-group>
				</u-form-item>
				<u-form-item
					label="异常描述:"
					prop="abnorm_content"
					borderBottom
					ref="abnorm_content"
					labelWidth="120"
					v-if="guihuanData.return_situation!=1"
				>
				<u--input v-model="guihuanData.abnorm_content" placeholder="请输入异常描述" border="none"></u--input>
				</u-form-item>

				<u-form-item
					label="归还备注:"
					prop="return_remark"
					borderBottom
					ref="item1"
					labelWidth="120"
				>

				</u-form-item>
				<u--textarea v-model="guihuanData.return_remark" placeholder="请输入备注" height="50" count confirmType="done"></u--textarea>
			</u--form>
			<view class="btn-dengji"><u-button type="primary" shape="circle" text="提交归还登记" @click="doneGuihuan"></u-button></view>
			</view>
		 </u-popup>

		 <u-popup
		 :show="showYichang"
		 :round="8"
		 closeable
		 @close="showYichang=false"
		 customStyle="height:60%"
		 >
		 	<view class="wy-title">用车异常处理</view>
			<view class="wybox">
			<u--form
			labelPosition="left"
			:model="yichangData"
			:rules="rules3"
			ref="uviewForm3"
			>
				<u-form-item
					label="申请单号:"
					prop="apply_no"
					borderBottom
					ref="apply_no"
					labelWidth="120"
				>
				{{apply_no}}
				</u-form-item>
				<u-form-item
					label="费用支付方:"
					prop="pay_user_name"
					borderBottom
					ref="pay_user_name"
					labelWidth="120"
				>
				<u--input v-model="yichangData.pay_user_name" placeholder="请输入费用支付方" border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="维修总费用(元):"
					prop="repair_money"
					borderBottom
					ref="item1"
					labelWidth="120"
				>
				<u--input v-model="yichangData.repair_money" placeholder="请输入维修总费用(元)" border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="维修负责人:"
					prop="repair_user_name"
					borderBottom
					ref="repair_user_name"
					labelWidth="120"
				>
				<u--input v-model="yichangData.repair_user_name" placeholder="请输入维修负责人" border="none"></u--input>
				</u-form-item>

				<u-form-item
					label="维修记录:"
					prop="repair_content"
					borderBottom
					ref="repair_content"
					labelWidth="120"
				>
				<u--input v-model="yichangData.repair_content" placeholder="请输入维修记录" border="none"></u--input>
				</u-form-item>

				<u-form-item
					label="备注:"
					prop="repair_remark"
					borderBottom
					ref="item1"
					labelWidth="120"
				>

				</u-form-item>
				<u--textarea v-model="guihuanData.repair_remark" placeholder="请输入备注" height="50" count confirmType="done"></u--textarea>
			</u--form>
			<view class="btn-dengji"><u-button type="primary" shape="circle" text="提交" @click="doneYichang"></u-button></view>
			</view>
		 </u-popup>
		 <u-datetime-picker
			 :show="showPK"
			 v-model="datetimetext"
			 mode="datetime"
			 title="选择日期时间"
			 itemHeight="55"
			 visibleItemCount="7"
			 @cancel="showPK=false"
			 @confirm="confirmPK"
		 ></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0,
				imgUrl:this.$config.BASE_imgUrl,
                tabsList: [{
                    name: '申请中',
					badge: {value:0,},
					startNum: 0,
					isAll: false,
					data: []
                }, {
                    name: '待办',
					startNum: 0,
					isAll: false,
					data: []
                }, {
                    name: '已完成',
					startNum: 0,
					isAll: false,
					data: []
                }],
				showDate:false,
				valuePickerDate:uni.$u.timeFormat(Number(new Date()), 'yyyy-mm'),
				valueDate: [{
					date:'',
				}, {
					date:'',
				}, {
					date:'',
				}],
				scrollViewHeight: 0,
				triggered:false,
				isloading:false,
				loadmoreStatus:'nomore',
				formdata:{
					start:0,
					searchKey:'',
					dateMonth:'',
					spStatus:'',
				},
				showLingyong:false,
				showGuihuan:false,
				showYichang:false,
				lingyongData:{
					"car_reserve_id": "",
					"requisi_time": "",
					"requisi_content": "",
					"requisi_remark": "",
					"isSubmit": false
				},
				guihuanData:{
					"car_reserve_id": "",
					"return_time": "",
					"return_situation": "1",
					"abnorm_content": "",
					"return_remark": "",
					"isSubmit": false
				},
				yichangData:{
					"car_reserve_id": "",
					"pay_user_name": "",
					"repair_money": "",
					"repair_user_name": "",
					"repair_content": "",
					"repair_remark": "",
					"isSubmit": false
				},
				radioList:[
					{nameText:"正常",name:"1",disabled:false},
					{nameText:"异常",name:"0",disabled:false},
				],
				apply_no:'',
				datetimetext:Number(new Date()),
				dateType:1,
				showPK:false,
				rules1: {
					'requisi_time': {
						type: 'string',
						required:true,
						message: '请选择领用登记时间',
						trigger:['blur','change']
					},
				},
				rules2: {
					'return_time': {
						type: 'string',
						required:true,
						message: '请选择归还登记时间',
						trigger:['blur','change']
					},
				},
				rules3: {
					'pay_user_name': {
						type: 'string',
						required:true,
						message: '请填写费用支付方',
						trigger:['blur','change']
					},
					'repair_money': {
						type: 'string',
						required:true,
						message: '请填写维修总费用(元)',
						trigger:['blur','change']
					},
					'repair_user_name': {
						type: 'string',
						required:true,
						message: '请填写维修负责人',
						trigger:['blur','change']
					},
				},
			}
		},
		onShow(){
			this.queryListInfo(true)
		},
		mounted(){
			this.$util.getHeightWithTopEl(".util-bar").then(height => {
				this.scrollViewHeight = height;
			});
		},
		onUnload(){
			uni.$off('refreshPatrolTask')
		},
		methods: {
			openLingyong(item){
				this.apply_no=item.currentTarget.dataset.item.apply_no;
				this.lingyongData.car_reserve_id=item.currentTarget.dataset.item.car_reserve_id;
				this.showLingyong=true;
			},
			openGuihuan(item){
				// item.currentTarget.dataset.item
				this.apply_no=item.currentTarget.dataset.item.apply_no;
				this.guihuanData.car_reserve_id=item.currentTarget.dataset.item.car_reserve_id;
				this.showGuihuan=true;
			},
			openYichang(item){
				this.apply_no=item.currentTarget.dataset.item.apply_no;
				this.yichangData.car_reserve_id=item.currentTarget.dataset.item.car_reserve_id;
				this.showYichang=true;
			},
			doneLingyong(){
				var that=this;
				this.$refs.uviewForm1.validate().then(res => {
					//uni.$u.toast('校验通过')
					console.log(this.lingyongData)
					this.$util.confirm({
						content: "确定提交领用登记？",
						confirmText: "确定"
					}).then(isConfirm => {
						if (isConfirm) {
							this.$util.post({
								url: "app/poCarReserve/register",
								data: this.lingyongData,
							}).then(res => {
								uni.showModal({
									title: '提示',
									content: '信息提交成功！',
									showCancel:false,
									success: function (res) {
										that.showLingyong=false;
										that.pullDownRefresh();
									}
								});
							})
						}
					})
				}).catch(errors => {
					uni.$u.toast('请输入必填项')
				})
			},
			doneGuihuan(){
				var that=this;
				this.$refs.uviewForm2.validate().then(res => {
					//uni.$u.toast('校验通过')
					console.log(this.guihuanData)
					this.$util.confirm({
						content: "确定提交归还登记？",
						confirmText: "确定"
					}).then(isConfirm => {
						if (isConfirm) {
							this.$util.post({
								url: "app/poCarReserve/returnCar",
								data: this.guihuanData,
							}).then(res => {
								uni.showModal({
									title: '提示',
									content: '信息提交成功！',
									showCancel:false,
									success: function (res) {
										that.showGuihuan=false;
										that.pullDownRefresh();
									}
								});
							})
						}
					})
				}).catch(errors => {
					uni.$u.toast('请输入必填项')
				})
			},
			doneYichang(){
				var that=this;
				this.$refs.uviewForm3.validate().then(res => {
					//uni.$u.toast('校验通过')
					console.log(this.yichangData)
					this.$util.confirm({
						content: "确定提交异常处理？",
						confirmText: "确定"
					}).then(isConfirm => {
						if (isConfirm) {
							this.$util.post({
								url: "app/poCarReserve/abnormal",
								data: this.yichangData,
							}).then(res => {
								uni.showModal({
									title: '提示',
									content: '信息提交成功！',
									showCancel:false,
									success: function (res) {
										that.showYichang=false;
										that.pullDownRefresh();
									}
								});
							})
						}
					})
				}).catch(errors => {
					uni.$u.toast('请输入必填项')
				})
			},
			showPKtime(id){
				this.dateType=id;
				this.showPK=true;
			},
			confirmPK(e){
				console.log(e)
				this.showPK=false;
				var datetimetext=uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				if(this.dateType==1){
					this.lingyongData.requisi_time=datetimetext;
				}else{
					this.guihuanData.return_time=datetimetext;
				}
			},
			viewAccept(id){
				uni.navigateTo({
					url: '/pagesB/car-reservation/car-reservation-accept?car_reserve_id='+id.currentTarget.dataset.id
				})
			},
			viewDetail(id){
				uni.navigateTo({
					url: '/pagesB/car-reservation/car-reservation-detail?car_reserve_id='+id.currentTarget.dataset.id
				})
			},
			viewApply(){
				uni.navigateTo({
					url: '/pagesB/vehicle-info/vehicle-info-apply'
				})
			},
			tabsChange(e){
				this.tabIndex = e.target.current
				this.queryListInfo(true)
			},
            clickTabs(item) {
                console.log('item', item);
				this.tabIndex=item.index;
				this.queryListInfo(true)
            },
			cancelDate(){
				this.showDate=false;
			},
			confirmDate(e){
				//console.log(uni.$u.timeFormat(new Date(e.value), 'yyyy-mm'));
				this.valueDate[this.tabIndex].date=uni.$u.timeFormat(new Date(e.value), 'yyyy-mm')
				//console.log(this.valueDate)
				this.showDate=false;
				for(let item of this.tabsList){
					item.startNum = 0;
					item.isAll = false;
				}
				this.queryListInfo()
			},
			pullDownRefresh(){
				if(this.triggered){
					return;
				}
				this.triggered = true;
				for(let item of this.tabsList){
					item.startNum = 0;
				}
				this.queryListInfo(true)
			},
			reachBottom(){
				this.queryListInfo()
			},
			searchHandle(){
				for(let item of this.tabsList){
					item.startNum = 0;
					item.isAll = false;
				}
				this.queryListInfo(true)
			},
			stopRefresh(){
				setTimeout(()=>{
					this.triggered = false;
					console.log('stop')
				}, 500)
			},
			resetSort() {
				if (this.valueDate[this.tabIndex].date) {
					this.valueDate[this.tabIndex].date = ""
					this.resetTab()
					this.queryListInfo()
				}
			},
			resetTab(){
				for(let item of this.tabsList){
					item.startNum = 0;
					item.isAll = false;
					item.data = []
				}
			},
			async queryListInfo(flag) {
				console.log('queryListInfo',this.tabsList)
				let startNum = this.tabsList[this.tabIndex].startNum;
				if(flag === true && startNum != 0) {
					this.stopRefresh()
					return;
				}
				if(this.tabsList[this.tabIndex].isAll) {
					this.stopRefresh()
					return; // 加载完成
				}

				//选项卡位置：0申请中1审批2完成
				var statusName='APPLYING';
				if(this.tabIndex==1){statusName='PENDING';}
				if(this.tabIndex==2){statusName='COMPLETE';}

				//初始化查询条件
				let pageSize=3;//翻页：每页多少条记录
				let params = {
					start:startNum,
					limit:pageSize
				}
				//搜索“单号/经办人/申请人单位”关键词
				if(this.formdata.searchKey){
					params.searchKey = this.formdata.searchKey
				}
				//加入筛选日期条件
				if (this.valueDate[this.tabIndex].date) {
					params.dateMonth = this.valueDate[this.tabIndex].date
				}
				let res=[];
				this.isloading=true
				this.loadmoreStatus='loading'
				res = await this.$api.get_poCarReserve_getCarReserveList(params,statusName)
				console.log('res--------------------222',res)
				//选项卡位置：0申请中1审批2完成，返回获取数据。
				if(this.tabIndex===0){res = res.APPLYING}
				if(this.tabIndex==1){res = res.PENDING}
				if(this.tabIndex==2){res = res.COMPLETE}
				console.log('res--------------------',res)
				//返回数据，赋值到对应选项内容列表
				if(res.length == 0 && this.tabsList[this.tabIndex].data.length == 0){
					this.isloading=false;
					this.loadmoreStatus='nomore';
					this.stopRefresh();
					return
				}
				console.log('this.tabsList',this.tabsList)
				//默认20条记录为一页
				if(res.length < pageSize){
					this.tabsList[this.tabIndex].isAll = true
				}
				if(this.tabsList[this.tabIndex].startNum == 0){
					this.tabsList[this.tabIndex].data = res
				}else{
					this.tabsList[this.tabIndex].data = this.tabsList[this.tabIndex].data.concat(res)
				}
				this.tabsList[this.tabIndex].startNum += pageSize
				this.stopRefresh();
				this.isloading=false
				this.loadmoreStatus='nomore'
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
	background:#F8F8F8;
}
.top-white-box{
	background:#FFFFFF;
	margin-bottom:-2px;
}
.search-box{
	padding:10px 15px 10px 15px;
}
.select-search-btn{
	margin:15px 0px 10px 10px;
}
.data-list{
	background:#FFFFFF;
	padding:20px 10px 0px 10px;
	margin:10px;
	border-radius:5px;
	font-size:15px;
	.title{
		font-size:17px;
		font-weight:bold;
		color:#333333;
		margin-bottom:15px;
	}
	.grey-text{
		color:#999999;
	}
	.list-btn{
		text-align: center;
		border-top:1px solid #F5F5F5;
		height:52px;
		line-height:52px;
		color:#0055FE;
		font-size:17px;
		font-weight:bold;
	}
}
.loadText-0{
	padding:5px 0px 20px 0px;
}
.loadText-1{
	padding:5px 0px 110px 0px;
}
.detail{
	text-align:center;
	color:#000000;
}
.yuyue{
	text-align:center;
}
.greycl{
	text-align:center;
	color:#ccc;
}
.wy-title{
	text-align: center;
	font-size:18px;
	padding:15px 0 15px 0;
	border-bottom:1px solid #f1f1f1;
	font-weight:bold;
	background-color:#f1f1f1;
	border-radius:8px 8px 0 0;
}
.wybox{
	padding:15px;
	margin:0 15px 0 15px;
	font-size:28rpx;
	border-radius:8px;
}
.btn-dengji{
	padding:20px 0 15px 0;
}
</style>
